<script lang="ts" setup>
import type { DataType } from './types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';

import {
  Button,
  message,
  Modal,
  Popconfirm,
  Space,
  Switch,
} from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUsers } from '#/api/plugin/wechat';
import { deleteUserOauthUsers } from '#/api/user/oauthUsers';
import { postUserUsersStatus } from '#/api/user/users';
import Icon from '#/components/Icons';
import { toggleStatus } from '#/utils';

defineOptions({
  name: 'PluginWechatAdminIndexuserList',
});
const router = useRouter();
const routeMeta = router.currentRoute.value.meta;
// 去除'管理'和'列表'两个字
const viewTitle = routeMeta.title.replace('管理', '').replace('列表', '');

const gridOptions: VxeGridProps<DataType> = {
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  columns: [
    { field: 'id', title: '编号' },
    { field: 'user_login', title: '用户名' },
    { field: 'user_nickname', title: '昵称' },
    {
      field: 'openid',
      title: 'openid',
    },
    { field: 'avatar', title: '头像', cellRender: { name: 'CellAvatar' } },
    {
      field: 'create_time',
      title: '注册时间',
      formatter: 'formatShortDateTime',
    },
    { field: 'last_login_ip', title: '最后登录IP' },
    {
      field: 'last_login_time',
      title: '最后登录时间',
      formatter: 'formatShortDateTime',
    },
    {
      field: 'user_status',
      title: '状态',
      slots: { default: 'status' },
    },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 120,
    },
  ],
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const { data } = await getUsers({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({
  gridOptions,
});

const handleDelete = async (row: DataType) => {
  const $table = GridApi.grid;
  if ($table) {
    const { msg } = await deleteUserOauthUsers(row.id);
    $table.remove(row);
    message.success(msg);
  }
};

const onChange = async (row: DataType) => {
  Modal.confirm({
    title: '系统提示',
    content: `确认要${row.user_status === 0 ? '停用' : '启用'}吗?`,
    async onOk() {
      try {
        await postUserUsersStatus(row.id, row.user_status);
        message.success(`已${row.user_status === 0 ? '停用' : '启用'}`);
      } catch {
        row.user_status = toggleStatus(row.user_status);
      }
    },
    onCancel() {
      row.user_status = toggleStatus(row.user_status);
    },
  });
};
</script>

<template>
  <Page auto-content-height>
    <Grid :table-title="`${viewTitle}列表`">
      <template #status="{ row }">
        <Switch
          v-model:checked="row.user_status"
          :checked-value="1"
          :disabled="row.id === 1"
          :un-checked-value="0"
          checked-children="启用"
          un-checked-children="停用"
          @change="onChange(row)"
        />
      </template>

      <template #action="{ row }">
        <Space>
          <Popconfirm
            :disabled="row.id === 1"
            cancel-text="否"
            ok-text="是"
            title="确认删除？"
            @confirm="handleDelete(row)"
          >
            <Button :disabled="row.id === 1" danger type="primary">
              <template #icon>
                <span class="anticon">
                  <Icon icon="ri:delete-bin-line" />
                </span>
              </template>
              删除
            </Button>
          </Popconfirm>
        </Space>
      </template>
    </Grid>
  </Page>
</template>
